<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <style>
        .c1 {
            color: red;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <p id="p1" class="sdjf">1231</p>

    <p class="testC"></p>
</body>
<script>
    /**
     *  class 特殊属性：class是js 的关键字
     *  className
     * 
     *  为什么这个名字是className??? [真实dom用的就是className]
     *  我们className是个虚拟dom定义 class ，虚拟dom最终会转为真实dom，虚拟dom中的属性和真实dom属性一一对应===》真实dom用的也是className
     * 
     */
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    const span = React.createElement('span', {className:'c1'}, '我是span标签') // 创建 一个 react元素[虚拟dom] ==》 span标签
    root.render(span)

    // 真实dom用的也是className
    const oP = document.querySelector('.testC')
    console.dir(oP)
</script>

</html>